<template>
  <el-row style="background-color: #d6c6c9">
    <el-col :span="24" :offset="0">
      <div class="a01">
        <img style="width: 100%;height: 100%" src="https://sta-op.douyucdn.cn/butterfly-java/2021/01/06/94bcd066ad0ba06fed1d31f6e7891908.jpg?width=1920&height=529&size=292864&x-oss-process=image%2Fformat%2Cwebp"/>
      </div>
    </el-col>
    <el-col :span="20" :offset="2">
      <div class="a02">
        <div class="a021">
          <div class="a0211">
            <div class="a02111">
              <img style="width: 100%;height: 100%" :src="anchor.aPic"/>
            </div>
          </div>
          <div class="a0212">
            <div class="a02121">
              <div class="a021211">
                {{anchor.aTitle}}
              </div>
              <div class="a021212">
                举报
              </div>
            </div>
            <div class="a02122">
              <div class="a021221">
                <img src="../assets/zhubodengji.png" style="width: 100%;height: 100%"/>
              </div>
              <div class="a021222">
                {{anchor.aName}}
              </div>
              <div class="a021223">
                <img src="../assets/redu.png" style="margin-top: 6px"/><span>{{anchor.aRedu}}</span>
              </div>
              <div class="a021224">
                {{anchor.aChenghao}}
              </div>
              <div class="a021225">
                999+kg
              </div>
            </div>
            <div class="a02123">
              <div class="a021231">
                <img style="width: 100%;height: 100%" src="../assets/vzhoubang.png"/>
              </div>
              <div class="a021232">
                <img style="height: 100%;width: 100%" src="../assets/fuxingtiaozhan.png"/>
              </div>
              <div class="a021233">
                <img style="width: 100%;height: 100%" src="../assets/chaojifensi.png"/>
              </div>
            </div>
          </div>
          <div class="a0213">
            <div class="a02131">
              <div class="a021312">{{anchor.aGuanzhu}}</div>
              <div class="a021311">
                <button class="a021311btn" v-if="guanzhustatus" @click="guanzhu(myaId,user.uId)">关注</button>
                <button class="a021311btn" v-if="!guanzhustatus" @click="quguan(myaId,user.uId)">取关</button>
              </div>
            </div>
            <div class="a02132"></div>
            <div class="a02133">
              <div class="a021331">
                <img style="height: 100%;width: 100%" src="../assets/kelinghuojian.png"/>
              </div>
              <div class="a021332">
                <img src="../assets/fenxiang.png" style="width: 80%;height: 60%;margin-top: 10px;margin-left: 10px;" />
              </div>
            </div>
          </div>
        </div>
        <div class="a022">

          <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions" style="height: 700px"></videoPlayer>
          <div style="position: absolute;width: 958px;height: 150px;margin-left: 352px;margin-top: 49px">
            <vue-baberrage
              style="width: 1172px;text-align: center;margin-top: -725px;margin-left: -352px;"
              :isShow= "barrageIsShow"
              :barrageList = "barrageList"
              :loop = "barrageLoop"
            >
            </vue-baberrage>
          </div>
        </div>
        <div class="a023">
          <div style="width: 75%;float: left">
            <div class="a0231" v-for="o in giftlist">
              <img style="width: 100%;height: 100%" :src="o.gpic" @click="zengsong(o.gprice)"/>
            </div>
          </div>
          <div class="a023a">
            <div class="a023a1">鱼翅：{{user.uMoney}}</div>
            <div class="a023a2">
              <button class="btn01">充值</button>
            </div>
          </div>
        </div>
      </div>
      <div class="a03">
        <div class="a031">
          <!--贡献总榜-->
        </div>
        <div class="a032">
          <div class="a0321">
            <div class="a03211">
              <img style="width: 100%;height: 100%;border-radius: 50%" :src="anchorcontribution[1].uPic"/>
            </div>
            <div class="a03212">{{anchorcontribution[1].uName}}</div>
            <div class="a03213">
              <!--<img style="height: 100%;width: 100%" src="../assets/zhubodengji.png"/>-->
              {{contribution1}}
            </div>
          </div>
          <div class="a0322">
            <div class="a03211">
              <img style="width: 100%;height: 100%;border-radius: 50%" :src="anchorcontribution[0].uPic"/>
            </div>
            <div class="a03212">{{anchorcontribution[0].uName}}</div>
            <div class="a03213">
              <!--<img style="height: 100%;width: 100%" src="../assets/zhubodengji.png"/>-->
              {{contribution}}
            </div>
          </div>
          <div class="a0323">
            <div class="a03211">
              <img style="width: 100%;height: 100%;border-radius: 50%" :src="anchorcontribution[2].uPic"/>
            </div>
            <div class="a03212">{{anchorcontribution[2].uName}}</div>
            <div class="a03213">
              <!--<img style="height: 100%;width: 100%" src="../assets/zhubodengji.png"/>-->
              {{contribution2}}
            </div>
          </div>
        </div>
        <div class="a033">
          <div class="a0331">4</div>
          <div class="a0332">{{contribution3}}</div>
          <div class="a0333">{{anchorcontribution[3].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">5</div>
          <div class="a0332">{{contribution4}}</div>
          <div class="a0333">{{anchorcontribution[4].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">6</div>
          <div class="a0332">{{contribution5}}</div>
          <div class="a0333">{{anchorcontribution[5].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">7</div>
          <div class="a0332">{{contribution6}}</div>
          <div class="a0333">{{anchorcontribution[6].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">8</div>
          <div class="a0332">{{contribution7}}</div>
          <div class="a0333">{{anchorcontribution[7].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">9</div>
          <div class="a0332">{{contribution8}}</div>
          <div class="a0333">{{anchorcontribution[8].uName}}</div>
        </div>
        <div class="a033">
          <div class="a0331">10</div>
          <div class="a0332">{{contribution9}}</div>
          <div class="a0333">{{anchorcontribution[9].uName}}</div>
        </div>
        <div class="a034" >
          <vue-seamless-scroll :data="gundata" class="seamless-warp">
            <ul class="item">
              <li >
                <span style="color: chartreuse">{{user.uName}}：</span><span class="title" v-html="gundata"style="color: black"></span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <div class="a004">
        <div class="a041">
          <input class="a04inpt" placeholder="快来和主播互动吧" v-model="elForm.msg"></input>
        </div>
        <div class="a042">
          <button class="a04btn" @click="addToList">发送</button>
        </div>
      </div>
      <div class="a05">
        <img style="width: 100%;height: 100%" src="../assets/zhibodibu.png"/>
      </div>
      <div class="a06" v-if="chaoguanstatus">
        <button class="a06btn02" @click="jinggao(myaId)">违规警告</button>
        <button class="a06btn01" @click="fengjin(myaId)">是否封禁</button>
        <button class="a06btn01" @click="jiefeng(myaId)">解封</button>
      </div>
      <div class="a07" v-if="pingbix">
        zzz
      </div>
    </el-col>
    <div id="k" v-show="texiaostatus">
      <img style="width: 100%;height: 100%;border-radius: 30px" src="../assets/texiao.gif"/>
    </div>
  </el-row>
</template>

<script>
  import axios from 'axios'
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'
  import { MESSAGE_TYPE } from 'vue-baberrage'
  axios.defaults.withCredentials=true;
  export default {
    components: {
      videoPlayer
    },
    data () {
      return {
        pingbix:false,
        chaoguanstatus:false,
        texiaostatus:false,
        guanzhustatus:true,
        anchor:'',
        myaId:'',
        contribution:'',
        contribution1:'',
        contribution2:'',
        contribution3:'',
        contribution4:'',
        contribution5:'',
        contribution6:'',
        contribution7:'',
        contribution8:'',
        contribution9:'',
        anchorcontribution:[
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          },
          {
            uId:'',
            uName:'暂无人上榜',
            uPass:'',
            uTel:"",
            uPic:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg',
          }
        ],
        user:{
          uEmail:'',
          uId:'',
          uMoney:0,
          uName:'',
          uPass:'',
          uPic:''
        },
        giftlist:[],
       gundata:'',
        listData: [
          {
            "title":''
          }
        ],
        playerOptions: {
          height: '300',
          sources: [{
            type: 'rtmp/hls',
            src: '' //rtmp流地址
          }],
          techOrder: ['flash','html5'],
          autoplay: true,
          controls: true,
          poster: '',
          height:'700px',
          nsPlayer:{bufferTime : 0.1},
          notSupportedMessage: '该主播未开播，请开播后再来观看', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        },
        elForm:{
          msg: '',
        },

        barrageIsShow: true,
        currentId : 0,
        barrageLoop: false,
        barrageList: [],
        video: {},
        discuss: [],
        formData: {
          discuss: undefined,
        },
        rules: {
          discuss: [{
            required: true,
            trigger: 'blur'
          }],
        },
      }
    },
    methods:{
      jinggao(){
        this.elForm.msg="请规范你的直播行为，否则会受到封禁直播间处罚"
        this.gundata=''
        this.addToList()
      },
      fengjin(aId){
        axios.post("http://localhost:7000/live-live/anchor/fengta",{aId:aId}).then(res=>{
          if(res.data.code==200){
            this.$router.push("/zhibohome")
            alert(res.data.message)
          }
        })
      },
      jiefeng(aId){
        axios.post("http://localhost:7000/live-live/anchor/jiefeng",{aId:aId}).then(res=>{
          if(res.data.code==200){
            this.$router.push("/zhibohome")
            alert(res.data.message)
          }
        })
      },
      //增加关注
      guanzhu(aId){
        //判断是否有cookie  有 执行  没有跳登录界面
        if(this.$cookie.get("token")==null){
          this.$parent.handleclick()
        }
        axios.post("http://localhost:7000/live-user/user/guanzhuAnchor",{aId:aId}).then(res=>{
          if(res.data.code==200){
            this.guanzhustatus=!this.guanzhustatus
            this.findAnchorById(aId)
          }
        })
      },

      //取消关注
      quguan(aId){
        if(this.$cookie.get("token")==null){
          this.$parent.handleclick()
        }
        axios.post("http://localhost:7000/live-user/user/quguanAnchor",{aId:aId}).then(res=>{
          if(res.data.code==200){
            this.guanzhustatus=!this.guanzhustatus
            this.findAnchorById(aId)
          }
        })
      },
      //增加热度
      addRedu(aId,price){
        axios.post("http://localhost:7000/live-live/anchor/addRedu",{aId:aId,price:price}).then(res=>{
          if(res.data.code==200){
            this.findAnchorById(aId)
          }
        })
      },

      //根据aId查出主播信息
      findAnchorById(aId){
        axios.post("http://localhost:7000/live-live/anchor/findAnchorById",{aId:aId}).then(res=>{
          // console.log(res.data)
          if(res.data.code==200){
              this.anchor=res.data.data
            console.log(this.anchor)
            console.log(this.anchor.aStatus+"qqqqqqqqqqqq")
            console.log(this.anchor.aName+"qqqqqqqqqqqq")
            if(res.data.data.aStatus==0){
              this.playerOptions.sources[0].src=this.anchor.aUrl
              console.log(this.anchor)
            }else if(res.data.data.aStatus==1){
              this.pingbix=true
              // alert("主播未开播")
            }else if(res.data.data.aStatus==2){
              this.pingbix=true
              alert("该主播有违规行为,请观看其他直播")
            }

          }
        })
      },

      //根据用户信息查出对应的贡献度
      getContributionByValue(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution=res.data.data
          }
        })
      },
      getContributionByValue1(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution1=res.data.data
          }
        })
      },
      getContributionByValue2(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution2=res.data.data
          }
        })
      },
      getContributionByValue3(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution3=res.data.data
          }
        })
      },
      getContributionByValue4(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution4=res.data.data
          }
        })
      },
      getContributionByValue5(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution5=res.data.data
          }
        })
      },
      getContributionByValue6(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution6=res.data.data
          }
        })
      },
      getContributionByValue7(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution7=res.data.data
          }
        })
      },
      getContributionByValue8(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution8=res.data.data
          }
        })
      },
      getContributionByValue9(UserReq,aId){
        axios.post("http://localhost:7000/live-live/anchor/getScoreByValue?aId="+aId,UserReq).then(res=>{
          if(res.data.code==200){
            this.contribution9=res.data.data
          }
        })
      },
      //获取贡献榜
      getAnchorContribution(aId){
          axios.post("http://localhost:7000/live-live/anchor/getAnchorUser1",{aId:aId}).then(res=>{
            if(res.data.code==200){
               console.log(res.data.data)
              if(res.data.data[0]){
                this.anchorcontribution[0]=res.data.data[0]
                this.contribution=this.getContributionByValue(this.anchorcontribution[0],aId)
              }
              if(res.data.data[1]){
                this.anchorcontribution[1]=res.data.data[1]
                this.contribution1=this.getContributionByValue1(this.anchorcontribution[1],aId)
              }
              if(res.data.data[2]){
                this.anchorcontribution[2]=res.data.data[2]
                this.contribution2=this.getContributionByValue2(this.anchorcontribution[2],aId)
              }
              if(res.data.data[3]){
                this.anchorcontribution[3]=res.data.data[3]
                this.contribution3=this.getContributionByValue3(this.anchorcontribution[3],aId)
              }if(res.data.data[4]){
                this.anchorcontribution[4]=res.data.data[4]
                this.contribution4=this.getContributionByValue4(this.anchorcontribution[4],aId)
              }
              if(res.data.data[5]){
                this.anchorcontribution[5]=res.data.data[5]
                this.contribution5=this.getContributionByValue5(this.anchorcontribution[5],aId)
              }
              if(res.data.data[6]){
                this.anchorcontribution[6]=res.data.data[6]
                this.contribution6=this.getContributionByValue6(this.anchorcontribution[6],aId)
              }
              if(res.data.data[7]){
                this.anchorcontribution[7]=res.data.data[7]
                this.contribution7=this.getContributionByValue7(this.anchorcontribution[7],aId)
              }
              if(res.data.data[8]){
                this.anchorcontribution[8]=res.data.data[8]
                this.contribution8=this.getContributionByValue8(this.anchorcontribution[8],aId)
              }
              if(res.data.data[9]){
                this.anchorcontribution[9]=res.data.data[9]
                this.contribution9=this.getContributionByValue9(this.anchorcontribution[9],aId)
              }
            }
          })
      },
      //增加贡献度
      changeContribution(uId,aId,price){
        axios.post("http://localhost:7000/live-user/user/getContribution",{uId:uId,aId:aId,price:price}).then(res=>{
          if(res.data.code==200){
            alert(res.data.message)
            if(res.data.total==20){
              // this.$router.go(0)
              this.getAnchorContribution(this.myaId)
            }
          }
        })
      },
      //根据用户id查找用户信息
      getUserInfo(){
        axios.post("http://localhost:7000/live-user/user/findUserById").then(res=>{
          console.log(res.data.data)
          this.user=res.data.data
          if(this.user.ustatus==1){
            this.chaoguanstatus=true
          }
        })
      },
      //赠送主播礼物
      zengsong(price){
          if(price>this.user.uMoney){
            alert("余额不足，请及时充值")
          }else{
            alert(price)
            axios.post("http://localhost:7000/live-user/user/updateUserMoney",{uId:this.user.uId,uMoney:price}).then(res=>{
              if(res.data.code==200){
                this.texiaostatus=true;
                setTimeout("document.getElementById('k').style.display='none'",4600);
                alert(res.data.message)
                //主播id
                this.changeContribution(this.user.uId,this.myaId,price)
                this.getUserInfo(this.user.uId)
                //主播id
                this.getAnchorContribution(this.myaId)
                //添加热度
                this.addRedu(this.myaId,price)
              }else {
                alert(res.data.message)
              }
            })
          }
      },
      //获取礼物列表
      getAllGift(){
        // alert("sss")
        axios.get("http://localhost:7000/live-live/gift/findAllGift").then(res=>{
          console.log(res.data.data)
          this.giftlist=res.data.data
          // alert("zzz")
        })
      },
      //发送的弹幕消息
      addToList () {
        this.barrageList.push({
          id: ++this.currentId,
          // avatar: "https://apic.douyucdn.cn/upload/avatar_v3/202010/8b271e7999ec40b69f2c0c8e35c33658_big.jpg?x-oss-process=image/format,webp/quality,q_75",
          avatar:this.user.uPic,
          msg: this.elForm.msg,
          time: 5,
          type: MESSAGE_TYPE.NORMAL,
        }),
          this.getdata()
          this.resetForm('elForm')
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      //弹幕滚动的数据
      getdata(){
        this.gundata=this.elForm.msg
        console.log(this.gundata+"-------------------")
      }
    },
    mounted(){
      this.myaId=this.$route.query.aId
      // alert(this.myaId)
      this.getAnchorContribution(this.myaId)
      //用户id
      this.getUserInfo();
      this.getAllGift()
      this.findAnchorById(this.myaId)
      // this.playerOptions.sources[0].src='rtmp://10.12.154.7:1935/cctvf/test'
      // var data=JSON.parse( localStorage.getItem("data"));
      // if(data==null){}
    }
  }
  // setTimeout("document.getElementById('k').style.display='none'",4600);
</script>

<style scoped>
  .a07{
    width: 100px;
    height: 100px;
    position: absolute;
    background: black;
    margin-top: -612px;
    margin-left: 525px;
  }
  .a06btn01{
    background-color: deepskyblue;
    color: red;
  }
  .a06btn02{
    background-color: deepskyblue;
    color: red;
  }
  .a06{
    position: absolute;
    margin-left: 1375px;
    margin-top: -100px;
    /*background-color: red;*/
    width: 75px;
    height: 30px;
    line-height: 30px;
  }
  #k{
    position: absolute;
    margin-left: 1461px;
    margin-top: 791px;
    width: 293px;
    height: 522px;
    opacity: 0.8;
  }
  .a05{
    margin-top: 19px;
    width: 70%;
    height: 100px;
    background-color: red;
  }
  .a021312{
    position: absolute;
    width: 150px;
    height: 42px;
    /*background-color: red;*/
    border-radius: 30px;
    margin-top: 3px;
    margin-left: 11px;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
  }
  .a021311btn{
    width: 91px;
    height: 52px;
    margin-top: 0px;
    border-radius: 30px;
    /* margin: auto; */
    margin-left: 178px;
    font-size: 20px;
    background-color: orange;
    border: none;
    /*overflow: hidden;*/
  }
  .a021311{
    width: 100%;
    height: 94%;
    background-color: ghostwhite;
    border-radius: 30px
  }
  .title{

  }
  .item{
    width: 170px;
    height: 70px;
    margin-left: 50px;
  }
  .seamless-warp {
    height: 260px;
    overflow: hidden;
  }
  .a034{
    background-color: #e7dbdb00;
    height: 210px;
    margin-top: 11px;
  }
  .a04btn{
    font-size: 18px;
    width: 98%;
    height: 52px;
    margin-top: 2px;
    border-color: orange;
    margin-left: -27px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background-color: orange;
  }
  .a04inpt{
    width: 90%;
    height: 80%;
    margin-top: 3px;
    margin-left: 10px;
    border-color: orange;
    /* border-radius: 5px; */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  .a042{
    width: 68px;
    height: 57px;
    /*background-color: white;*/
    float: left;
    margin-top: 7px;
    margin-left: 12px;
  }
  .a041{
    width: 78%;
    height: 80%;
    background-color: #d6c6c9;
    margin-top: 7px;
    float: left;
  }
  .a004{
    width: 430px;
    height: 70px;
    /*background-color: white;*/
    margin-left: 1213px;
    margin-top: 884px;
  }
  .a0331{
    float: left;
    width: 36px;
    height: 36px;
    background-color: #c6d8b4;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 50%;
    text-align: center;
    line-height: 37px;
  }
  .a0332{
    float: left;
    width: 15%;
    height: 40px;
    margin-left: 15px;
    margin-top: 3px;
    text-align: center;
    line-height: 36px;
    font-family: fantasy;
    color: #e962a7;
  }
  .a0333{
    float: left;
    width: 40%;
    height: 35px;
    background-color: #f1f1ed;
    text-align: center;
    line-height: 35px;
    margin-top: 5px;
    margin-left: 20px;
    font-family: cursive;
    font-size: 20px;
  }
  .a033{
    height: 45px;
    width: 100%;
    background-color: #f1f1ed;
    margin-top: 5px;
  }
  .a03211{
    width: 65%;
    height: 50%;
    border: 1px solid;
    margin: auto;
    margin-top: 10px;
    border-radius: 50%;
    border: none;
  }
  .a03212{
    width: 75%;
    height: 35px;
    background-color: #f1f1ed;
    margin: auto;
    margin-top: 10px;
    text-align: center;
    line-height: 35px;
    font-family: cursive;
    font-size: 20px;
  }
  .a03213{
    width: 40%;
    height: 35px;
    background-color: #f1f1ed;
    margin: auto;
    margin-top: 5px;
    text-align: center;
    line-height: 35px;
    font-family: fantasy;
    color: red;
  }
  .a0321{
    width: 33%;
    height: 100%;
    background-color: #f1f1ed;
    float: left;
    margin-left: 2px;
  }
  .a0322{
    width: 33%;
    height: 100%;
    background-color: #f1f1ed;
    float: left;
  }
  .a0323{
    width: 33%;
    height: 100%;
    background-color: #f1f1ed;
    float: left;
  }
  .a032{
    width: 100%;
    height: 200px;
    margin-left: 0px;
    /*background-color: cornflowerblue;*/
  }
  .a031{
    text-align: center;
    /*background-color: aquamarine;*/
    background-image: url("https://shark2.douyucdn.cn/front-publish/live-player-aside-master/assets/images/rank-all-header_e3119f5.webp");
    background-size: 100% 100%;
    width: 100%;
    height: 70px;
    /*font-size: 36px;*/
    /*line-height: 60px;*/
    /*font-family: cursive;*/
  }
  .vjs-custom-skin > .video-js {
    width: 100%;
    font-family: "PingFang SC","Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",sans-serif;
    height: 700px;
  }
  .btn01{
    width: 60px;
    height: 30px;
    margin-top: 9px;
    border: none;
    background-color: orange;
    color: #595d54;
    font-size: 22px;
    border-radius: 30px;
    cursor: pointer;
  }
  .a023a1{
    float: left;
    width: 66%;
    height: 80%;
    /*background-color: aliceblue;*/
    margin-top: 5px;
    text-align: center;
    line-height: 50px;
  }
  .a023a2{
    float: left;
    width: 29%;
    height: 80%;
    /*background-color: bisque;*/
    margin-top: 5px;
    margin-left: 6px;
    cursor: pointer;
  }
  .a023a{
    width: 20%;
    height: 55%;
    float: left;
    margin-top: 30px;
    margin-left: 40px;
  }
  .a0231{
    float: left;
    margin-left: 10px;
    width: 75px;
    height: 75px;
    /*background-color: yellow;*/
    margin-top: 12px;
    cursor: pointer;
  }
  .a021331{
    float: left;
    width: 60%;
    height: 80%;
    background-color: beige;
    margin-top: 5px;
  }
  .a021332{
    float: left;
    width: 30%;
    height: 80%;
    /*background-color: blueviolet;*/
    margin-top: 5px;
    margin-left: 15px;
  }
  .a02131{
    height: 36%;
    width: 100%;
    /*background-color: gray;*/
  }
  .a02132{
    height: 26%;
    width: 100%;
    /*background-color: aquamarine;*/
  }
  .a02133{
    height: 37%;
    width: 100%;
    /*background-color: darkorange;*/
  }
  .a021211{
    width: 58%;
    height: 80%;
    /*background-color: rosybrown;*/
    margin-top: 6px;
    float: left;
    font-size: 29px;
    text-align: center;
  }
  .a021212{
    width: 10%;
    height: 80%;
    /* background-color: #b72525; */
    margin-top: 6px;
    float: left;
    text-align: center;
    line-height: 54px;
    color: gray;
  }
  .a021221{
    width: 8%;
    height: 80%;
    background-color: aqua;
    margin-top: 5px;
    float: left;
  }
  .a021222{
    width: 20%;
    height: 80%;
    /*background-color: #c26596;*/
    margin-top: 5px;
    float: left;
    margin-left: 5px;
    line-height: 32px;
    text-align: center;
  }
  .a021223{
    width: 18%;
    height: 80%;
    /*background-color: rebeccapurple;*/
    margin-top: 5px;
    float: left;
    margin-left: 5px;
  }
  .a021224{
    width: 14%;
    height: 80%;
    margin-top: 5px;
    float: left;
    margin-left: 5px;
    line-height: 32px;
    color: red;
  }
  .a021225{
    width: 14%;
    height: 80%;
    /* background-color: red; */
    margin-top: 5px;
    float: left;
    margin-left: 5px;
    line-height: 32px;
    color: gray;
  }
  .a021231{
    width: 15%;
    height: 80%;
    background: blue;
    margin-top: 6px;
    float: left;
  }
  .a021232{
    width: 20%;
    height: 80%;
    background: #a8a8be;
    margin-top: 6px;
    float: left;
    margin-left: 5px;
  }
  .a021233{
    width: 20%;
    height: 80%;
    background: green;
    margin-top: 6px;
    float: left;
    margin-left: 5px;
  }
  .a02123{
    height: 35%;
    width: 100%;
    /*background-color: gainsboro;*/
  }
  .a02122{
    width: 100%;
    height: 26%;
    /*background-color: bisque;*/
  }
  .a02121{
    height: 35%;
    width: 100%;
    /*background-color: aliceblue;*/
  }
  .a02111{
    margin: auto;
    width: 60%;
    height: 80%;
    /*border: 1px solid;*/
    margin-top: 10px;
  }
  .a0213{
    width: 23%;
    height: 100%;
    /*background-color: red;*/
    float: left;
  }
  .a0212{
    width: 62%;
    height: 100%;
    /*background-color: gray;*/
    float: left;
  }
  .a0211{
    width: 15%;
    height: 100%;
    /*background-color: yellow;*/
    float: left;
  }
  .a023{
    width: 100%;
    height: 100px;
    background-color: #cbbed8;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 850px;
  }
  .a022{
    width: 100%;
    height: 700px;
    background-color: aqua;
    position: relative;float: left;
  }
  .a021{
    width: 100%;
    height: 150px;
    background-color: white;
   float: left;
    margin-left: 0px;
    margin-top: 0px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  .a01{
    width: 100%;
    height: 500px;
    border: solid 1px;
  }
  .a02{
    margin-top: 10px;
    width: 70%;
    /*height: 900px;*/
    float: left;
    border: 1px solid #dfd3d3;
    border-radius: 20px;
    /*border-radius: 10px;*/
    /*border-top-left-radius: 20px;*/
    /*border-top-right-radius: 20px;*/
    /*border-bottom-left-radius: 20px;*/
    /*border-bottom-right-radius: 20px;*/
  }
  .a03{
    margin-top: 10px;
    width: 475px;
    height: 850px;
    border: 1px solid pink;
    float: left;
    margin-left: 10px;
    background-color: #f1f1ed;
    border-radius: 10px;
  }
</style>
